<template>
  <div class="about-wrap">
    <Divider />
     <!-- 游戏场景 -->
    <a-row class="tw-mt-20 tw-pb-10 tw-justify-center">
      <a-col
        v-for="(item, index) in items"
        :key="index"
        :xs="{ span: 20, offset: 2 }"
        :md="{ span: 7, offset: 3 }"
        :lg="{ span: 7, offset: 3 }"
        :xxl="{ span: 6, offset: 0 }"
        class="tw-mb-5 tw-mr-20 tw-text-center tw-font-bold">
        <div class="image-wrap">
          <img :src="item.image" class="magic tw-inline tw-w-full tw-h-full tw-object-contain">
        </div>
        <div class="tw-mt-4 tw-text-b-primary tw-text-4xl">{{ item.title }}</div>
        <div class="text-wrap tw-m-auto tw-mt-5 tw-text-left tw-text-b-secondary tw-text-xl">{{ item.text }}</div>
      </a-col>
    </a-row>
    <a-row class="tw-mt-20 tw-pb-10 tw-justify-center">
      <a-col
        v-for="(item, index) in items2"
        :key="index"
        :xs="{ span: 20, offset: 2 }"
        :md="{ span: 7, offset: 3 }"
        :lg="{ span: 7, offset: 3 }"
        :xxl="{ span: 6, offset: 0 }"
        class="tw-mb-5 tw-mr-20 tw-text-center tw-font-bold">
        <div class="image-wrap">
          <img :src="item.image" class="magic tw-inline tw-w-full tw-h-full tw-object-contain">
        </div>
        <div class="tw-mt-4 tw-text-b-primary tw-text-4xl">{{ item.title }}</div>
        <div class="text-wrap tw-m-auto tw-mt-5 tw-text-left tw-text-b-secondary tw-text-xl">{{ item.text }}</div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>

import x3 from '@/assets/about-3.png'
import x4 from '@/assets/about-4.png'
import x5 from '@/assets/about-5.png'
import x6 from '@/assets/about-6.png'

const items = [
  {
    image: x3,
    title: `Discover`,
    text: `In the Stone Age, every tribe finds gold scattered everywhere by “exploration”. The stronger you are, the faster and the more the gold and treasures you find.`
  },
  {
    image: x4,
    title: `Explore`,
    text: `In the game, gears include weapons and clothes. Tribesmen find these items by collecting. Each gear is a unique NFT featuring different qualities and attributes. Forge your weapon and be stronger!`
  }
]

const items2 = [
  {
    image: x5,
    title: `Hunting`,
    text: `The stone tribesmen often hunted and captured a variety of animals, some of which they were tamed as proud pets that not only helped the tribesmen "discover" and "explore", but also allowed them to breed.`
  },
  {
    image: x6,
    title: `Breeding`,
    text: `All the pets can breed. Parents with good genes will have stronger offspring. But after breeding, the previous generation of pets will die.......`
  }
]

</script>

<style lang="less" scoped>
  .image-wrap {
    height: 300px;
  }
  .about-wrap {
    background-image: url("@/assets/bg.png");
    background-repeat: repeat;
  }
</style>